<template>
	<div>
		<el-card class="box-card">
		    <template #header>
		      <div class="card-header">
		        <span>添加管理员</span>
		      </div>
		    </template>
			<form ref="form">
				<div class="text item">
					<label>登录账号：</label>
					<el-input type="text" style="width: 280px" v-model="form.account"></el-input>
				</div>
				<div class="text item">
					<label>登录密码：</label>
					<el-input type="password" style="width: 280px" v-model="form.password"></el-input>
				</div>
				<div class="text item">
					<label>管理员名称：</label>
					<el-input type="text" style="width: 280px" v-model="form.nickname"></el-input>
				</div>
				<div class="text item">
					<label>手机号码：</label>
					<el-input type="phone" maxlength="11" style="width: 280px" v-model="form.phone"></el-input>
				</div>
				<el-button type="primary" @click="addUser()">添加</el-button>
			</form>
		</el-card>
	</div>
</template>

<script>
import qs from 'qs';
import { ElMessage } from 'element-plus';
export default{
	name:'AdminUser',
	data(){
		return {
			form:{
				account:'',
				password:'',
				nickname:'',
				phone:''
			}
		}
	},
	methods:{
		addUser(){
			if(!this.form.account || !this.form.password || !this.form.nickname || !this.form.phone )return false;
			this.axios.post('/api/adm/user/addAdm',qs.stringify(this.form)).then((res)=>{
				if(res.data.code==200){
					ElMessage({type:'success', message: res.data.msg});
					this.form = {
						account:'',
						password:'',
						nickname:'',
						phone:''
					}
				}else if(res.data.code==100){
					ElMessage.error({message: '添加失败，该用户名已存在'});
				}else{
					ElMessage.error({message: res.data.msg});
				}
			}).catch((err)=>{
				//console.log(err);
			})
		}
	}
}
</script>

<style scoped>
.box-card {
  width: 95%;
  float: left;
  margin: 20px 0 0 2.5%;
}
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}
</style>
